<template>
    <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane label="当前委托">当前委托
            <Table
                :columns="columns1"
                :data="data">
            </Table>
        </el-tab-pane>
        <el-tab-pane label="历史委托">历史委托
            <Table
                :columns="columns2"
                :data="data">
            </Table>
        </el-tab-pane>
  </el-tabs>

</template>

<script>
import { historyOrder } from '@/api/order'

export default {
    name: 'history',
    props: ['id'],
    data() {
        return {
            curTab: '0',
            data: [],
            timer: '',
            columns1: [
                {
                    title: '价格',
                    key: 'price',
                },
                {
                    title: '数量',
                    key: 'undealed',
                },
                {
                    title: '类型',
                    key: 'type',
                    render: (h, params) => {
                        const row = params.row
                        // eslint-disable-next-line no-nested-ternary
                        const color = row.type === false ? 'success' : 'error'
                        // eslint-disable-next-line no-nested-ternary
                        const text = row.type === false ? '买' : '卖'

                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color,
                            },
                        }, text)
                    },
                },
            ],
            columns2: [
                {
                    title: '成交价格',
                    key: 'price',
                },
                {
                    title: '数量',
                    key: 'dealed',
                },
                {
                    title: '类型',
                    key: 'type',
                    render: (h, params) => {
                        const row = params.row
                        // eslint-disable-next-line no-nested-ternary
                        const color = row.type === false ? 'success' : 'error'
                        // eslint-disable-next-line no-nested-ternary
                        const text = row.type === false ? '买' : '卖'

                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color,
                            },
                        }, text)
                    },
                },
                {
                    title: '成交时间',
                    key: 'ctime',
                },
            ],
        }
    },
    methods: {
        handleClick(tab) {
            this.curTab = tab.paneName
            this.fetchData()
        },
        fetchData() {
            historyOrder({ stock: this.id, type: this.curTab }).then((res) => {
                this.data = res.results
            })
        },
    },
    mounted() {
        this.fetchData()
        this.timer = setInterval(this.fetchData, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style>
</style>